<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>responseText</title>
<style type="text/css">
#responseText_body{
	width:900px;
	margin:auto;
}

.responseText_item{
	width:290px;
	border:2px solid #cccccc;
	display:inline-block;
	border: 1px solid #aabbcc;
	border-radius:40px 60px 10px 80px;
	text-align: center;

}

#pageDiv1,#pageDiv2,#pageDiv3{
	width:96%;
	margin:auto;
	height:400px;
	border:2px dotted #dddddd;
	border-radius:40px 60px 10px 80px;

}
#btnPage1,#btnPage2,#btnPage3{
	margin:10px;
	border:2px solid #0000ff;
	background-color: #00ffcc;
	border-radius:10px 10px 10px 10px;
	



}

</style>
<script>
var xhr;
function init2(){
	if(window.ActiveXObject){
		alert('브라우저를 업그래이드 하세요..');
		return;
	}
	xhr	= new XMLHttpRequest();//callback함수를 만들었다.
	xhr.onreadystatechange=myFunc;//XMLHttpRequest 객체의 상태값이 바뀌면 myFunc 호출
	
	var btn1=document.getElementById('btnPage1');
	var btn2=document.getElementById('btnPage2');
	var btn3=document.getElementById('btnPage3');
	
	
	//
	var div1=document.getElementById('pageDiv1');
	var div2=document.getElementById('pageDiv2');
	var div3=document.getElementById('pageDiv3');
	
	
	//버튼이 눌려질때마다 읽어들일 파일을 넣어놓는 이벤트 핸들러
	btn1.onclick=function(){
/* 		console.log('response','버튼1이 클릭됨'); */
		var url='./text1.html';
		xhr.open('get', url, true);//비동기 방식 형태로 xhr(XMLHttpRequest)을 실행 시키겠다
		xhr.send();
		
		rs = div1;
	}
	
	btn2.onclick=function(){//버튼2를 누르면
/* 		console.log('response','버튼2이 클릭됨');	 */
		var d=document.getElementById('dan').value;
		var url='./text2.jsp?dan='+d;
		xhr.open('get', url, true);//text2.jsp 파일을 읽어들이겠다.
		xhr.send();
		
		rs = div2;
	}
	
	btn3.onclick=function(){
/* 		console.log('response','버튼3이 클릭됨'); */
		var url='./text3.txt';
		xhr.open('get', url, true);
		xhr.send();
		
		rs = div3;
	}
	
	
function myFunc(){
/* 	rs.innerHTML += '<li> status : ' + xhr.status;
	rs.innerHTML +=	'<li> readyState : ' + xhr.readyState; */
	
	
	if(xhr.status==200 && xhr.readyState==4){ 
		rs.innerHTML=xhr.responseText;//div1,div2,div3을 안에 집어넣어라!
	}
}	

	
	
	
}
</script>

</head>
<body>
		<div id='responseText_body'>
			<div class='responseText_item'>
				<input type="button" value='Page1' id='btnPage1'><br/>
				<div id='pageDiv1'></div>
			</div>
			
			
			<div class='responseText_item'>
				<label>구구단</label>
				<input type='text' name='dan' id='dan' value='2' size='4'>
				<input type="button" value='Page2' id='btnPage2'><br/>
				<div id='pageDiv2'></div>
			</div>
			
			<div class='responseText_item'>
				<input type="button" value='Page3' id='btnPage3'><br/>
				<div id='pageDiv3'></div>
			</div>
			
		</div>
		<script>init2();</script>
</body>
</html>